﻿<template>
    <div class="esMerchantInterfaceTemplate-container">
        <el-dialog v-model="state.isShowDialog" draggable width="950px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
                        <ele-Edit/>
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="125px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="商户名称" prop="merchantId">
                            <el-select filterable v-model="state.ruleForm.merchantId" placeholder="请选择" class="w100"
                                       :disabled='props.title=="编辑"'>
                                <el-option v-for='item in state.merchantDict' :key='item.value' :label='item.label'
                                           :value='item.value'
                                           @click.native="merchantInterfaceTemplateQuery(item.value)"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="计费模式" prop="chargingMode">
                            <el-select v-model="state.ruleForm.chargingMode" placeholder="请选择" class="w100">
                                <el-option v-for='item in optionDict.chargingModeDict' :key='item.value'
                                           :label='item.label'
                                           :value='item.value'/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="请求方式" prop="httpMethod">
                            <el-select v-model="state.ruleForm.httpMethod" placeholder="请求方式" class="w100">
                                <el-option v-for='item in optionDict.httpMethodDict' :key='item.value'
                                           :label='item.label' :value='item.value'/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="订单依据" prop="orderResult">
                            <el-select v-model="state.ruleForm.orderResult" placeholder="订单结果依据" class="w100">
                                <el-option v-for='item in optionDict.orderResultDict' :key='item.value'
                                           :label='item.label' :value='item.value'/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="MimeType">
                            <el-select v-model="state.ruleForm.mimeType" placeholder="MimeType" class="w100">
                                <el-option v-for='item in optionDict.mimeTypeDict' :key='item.value'
                                           :label='item.label' :value='item.value'/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="查询订单延时" prop="queryOrderDelay">
                            <el-input v-model="state.ruleForm.queryOrderDelay" placeholder="请输入查询订单延时(second)"
                                      class="w100" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="服务程序" prop="reflection">
                            <el-input v-model="state.ruleForm.reflection" placeholder="请输入服务程序" class="w100"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="计费链接" prop="chargingLink">
                            <el-input v-model="state.ruleForm.chargingLink" placeholder="请输入计费链接" class="w100"
                                      clearable
                                      type="textarea" maxlength="800" style="word-break: break-all;"
                                      :autosize="{ minRows: 2 }"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="验证链接" prop="verifyLink">
                            <el-input v-model="state.ruleForm.verifyLink" placeholder="请输入验证链接" class="w100"
                                      clearable
                                      type="textarea" maxlength="800" style="word-break: break-all;"
                                      :autosize="{ minRows: 2 }"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="图验链接" prop="imageCodeLink">
                            <el-input v-model="state.ruleForm.imageCodeLink" placeholder="请输入图验链接" class="w100"
                                      clearable
                                      type="textarea" maxlength="800" style="word-break: break-all;"
                                      :autosize="{ minRows: 2 }"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="Token或策略链接" prop="checkOrTokenLink">
                            <el-input v-model="state.ruleForm.checkOrTokenLink" placeholder="请输入Token或策略链接" class="w100"
                                      clearable
                                      type="textarea" maxlength="800" style="word-break: break-all;"
                                      :autosize="{ minRows: 2 }"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="查询订单链接" prop="queryOrderLink">
                            <el-input v-model="state.ruleForm.queryOrderLink" placeholder="请输入查询订单链接"
                                      class="w100"
                                      clearable
                                      type="textarea" maxlength="800" style="word-break: break-all;"
                                      :autosize="{ minRows: 2 }"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="订单反馈链接" prop="orderLink">
                            <el-input v-model="state.ruleForm.orderLink" placeholder="请输入订单反馈链接" class="w100"
                                      clearable
                                      type="textarea" maxlength="800" style="word-break: break-all;"
                                      :autosize="{ minRows: 2 }"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="订单反馈服务程序" prop="orderLinkReflection">
                            <el-input v-model="state.ruleForm.orderLinkReflection" placeholder="请输入订单反馈服务程序"
                                      class="w100" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="state.ruleForm.remark" placeholder="请输入备注" class="w100" clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="editEsMerchantInterfaceTemplate">

import {reactive, ref} from 'vue';
import {ElMessage} from 'element-plus';
import type {FormRules} from "element-plus";
import mittBus from '/@/utils/mitt';

import {EsMerchantInterfaceTemplate, sysBaseDict} from '/@/api/models';
import SysEsMerchantInterfaceTemplateApi from '/@/api/exocytosis/merchantInterfaceTemplate';
import {optionDict} from "/@/const/dict";
import SysEsMerchantApi from "/@/api/exocytosis/merchant";

// 定义变量内容
const props = defineProps({
    title: String,
});
const ruleFormRef = ref();
const state = reactive({
    isShowDialog: false,
    merchantDict: [] as sysBaseDict[],
    ruleForm: {} as EsMerchantInterfaceTemplate,
    merchantInterfaceTemplateDict: [] as Array<EsMerchantInterfaceTemplate>,
});

// 删除非必填规则
const rules = ref<FormRules>({
    merchantId: [{required: true, message: '请输入商户ID！', trigger: 'blur',},],
    merchantTemplateIndex: [{required: true, message: '请输入商户接口模版编号！', trigger: 'blur',},],
    chargingMode: [{required: true, message: '请输入计费模式！', trigger: 'blur',},],
    httpMethod: [{required: true, message: '请输入请求方式！', trigger: 'blur',},],
    mimeType: [{required: true, message: '请输入MimeType！', trigger: 'blur',},],
    chargingLink: [{required: true, message: '请输入计费链接！', trigger: 'blur',},],
    verifyLink: [{required: true, message: '请输入验证链接！', trigger: 'blur',},],
    queryOrderDelay: [{required: true, message: '请输入查询订单延时(second)！', trigger: 'blur',},],
    orderResult: [{required: true, message: '请输入订单结果依据', trigger: 'blur',},],
    reflection: [{required: true, message: '请输入服务程序！', trigger: 'blur',},],
    remark: [{required: true, message: '请输入备注！', trigger: 'blur',},],
});

// 打开弹窗
const openDialog = (row: EsMerchantInterfaceTemplate) => {
    // 商户字典
    merchantTemplateShareQuery();
    state.ruleForm = row;
    state.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
    mittBus.emit('submitRefresh');
    state.isShowDialog = false;
};

// 获取商户名称

const merchantTemplateShareQuery = async () => {
    await SysEsMerchantApi().queryTemplateShareAll().then((res) => {
        if (res.data.resCode === '0000')
            state.merchantDict = res.data.result ?? [];
    });
};

const merchantInterfaceTemplateQuery = async (merchantId: string) => {
    await SysEsMerchantInterfaceTemplateApi().queryRecord({merchantId: merchantId}).then((res) => {
        if (res.data.resCode === '0000')
            state.merchantInterfaceTemplateDict = res.data.result.items ?? [];
    });
};

// 取消
const cancel = () => {
    state.isShowDialog = false;
};

// 提交
const submit = () => {
    ruleFormRef.value.validate(async (valid: boolean, fields?: any) => {
        if (valid) {
            let res;
            if (state.ruleForm.merchantId != undefined && state.ruleForm.merchantId > 0 && state.ruleForm.merchantTemplateIndex != undefined && state.ruleForm.merchantTemplateIndex > 0)
                res = await SysEsMerchantInterfaceTemplateApi().editPost(state.ruleForm);
            else
                res = await SysEsMerchantInterfaceTemplateApi().addPost(state.ruleForm);
            if (res.data.resCode != '0000')
                ElMessage.error(res.data.resMessage);
            else {
                ElMessage.success("操作成功");
                closeDialog();
            }
        } else {
            ElMessage({
                message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
                type: "error",
            });
        }
    });
};

// 导出对象 将属性或者函数暴露给父组件
defineExpose({openDialog});
</script>
